<template>
  <div class="prod-list">
    <!-- <yd-search :result="result" fullpage v-model="value2" :item-click="itemClickHandler" :on-submit="submitHandler"></yd-search> -->

    <div v-cloak class="filterbar-wrap">
        <ul id="filter" class="filterbar">
            <li :class="{'selected': index == selectedIndexMenu}" v-for="(barMenu, index) in barMenus" :key="index" @click="handleShowDialog(barMenu, index)">
                <div class="filter-label-wrap">
                    <span class="filter-label">{{ barMenu.label }}</span>
                </div>
                <span class="filter-value">{{ barMenu.value }}</span>
            </li>
        </ul>

        <div v-show="isShowFilter" class="filterbarpop-wrap">
            <div v-show="index == selectedIndexMenu" class="filterbarpop" v-for="(barMenu, index) in barMenus" :key="index">
              <yd-cityselect v-model="show1" :items="district"></yd-cityselect>
            </div>
        </div>
        <div v-show="isShowFilter" class="pro-filter-mask" @click="handleCloseDialog"></div>
    </div>

    <cityselect></cityselect>

  </div>
</template>

<script>
import District from 'ydui-district/dist/jd_province_city_area_id';
import cityselect from './cityselect';

export default {
  components: { cityselect },
  data() {
    return {
      barMenus: [{
          label: '全国',
          value: '全国'
        },
        {
          label: '品类',
          value: '全部'
        },
        {
          label: '筛选',
          value: '不限'
        }
      ],
      isShowFilter: false,
      selectedIndexMenu: undefined,
      selectedIndexMenu: undefined,
      show1: true,
      model1: '',
      district: District
    }
  },
  methods: {
    handleShowDialog: function(menu, index) {
      this.isShowFilter = true;
      this.selectedIndexMenu = index;
    },
    handleCloseDialog: function() {
      this.isShowFilter = false;
      this.selectedIndexMenu = -1;
    }
  }
}
</script>

